<template>
    <div class="mainV">
        <!-- <div style="margin: 10px 20px;">
            <a-button type="danger" @click="goBackToHome" style="height: 40px;" icon="home">回到首页</a-button>
        </div> -->
        <div class="mainVt">
            <div class="mainVti">
                <div>科室数量：</div>
                <p>
                    <CountTo class="minScleic" :startVal='0' :endVal='tdata.hospital' :duration='2000' />
                </p>
            </div>
            <div class="mainVti">
                <div>医生数量：</div>
                <p>
                    <CountTo class="minScleic" :startVal='0' :endVal='tdata.dept' :duration='2000' />
                </p>
            </div>
            <div class="mainVti">
                <div>就诊人数：</div>
                <p>
                    <CountTo class="minScleic" :startVal='0' :endVal='tdata.doctor' :duration='2000' />
                </p>
            </div>
            <div class="mainVti">
                <div>访问量：</div>
                <p>
                    <CountTo class="minScleic" :startVal='0' :endVal='tdata.systemVisit' :duration='2000' />
                </p>
            </div>
        </div>
        <div class="mainVm">
            <div class="mainVmi">
                <span>统计区间：</span>
                <a-select style="width: 120px;" size="small" v-model="date" placeholder="请选择统计区间" @change="getData">
                    <a-select-option :value="i.id" v-for="(i, o) in dateList" :key="o">{{ i.name }}</a-select-option>
                </a-select>
            </div>
            <div class="mainVmi">
                <span>医院：</span>
                <a-select style="width: 220px;" size="small" v-model="orgId" placeholder="请选择医院" @change="getData">
                    <a-select-option :value="i.id" v-for="(i, o) in hospList" :key="o">{{ i.name }}</a-select-option>
                </a-select>
            </div>
        </div>
        <div class="mainVc">
            <Visitor :isAdmin="false" :date="date" :orgId="orgId" />
            <Liveness :isAdmin="false" :date="date" :orgId="orgId" />
        </div>
        <div class="mainVe">
            <Case :isAdmin="false" :date="date" :orgId="orgId" />
            <Consultation :isAdmin="false" :date="date" :orgId="orgId" />
        </div>
    </div>
</template>

<script>
import { httpAction, getAction, getFileAccessHttpUrl } from '@/api/manage'
import CountTo from 'vue-count-to'
import Visitor from './modules/Visitor.vue'
import Case from './modules/Case.vue'
import Consultation from './modules/Consultation.vue'
import Liveness from './modules/Liveness.vue'
export default {
    components: { CountTo, Visitor, Case, Consultation, Liveness },
    data() {
        return {
            dateList: [{ id: 0, name: '今日' }, { id: 1, name: '本周' }, { id: 2, name: '本月' }, { id: 3, name: '本年' },],
            orgId: '',
            date: 0,
            hospList: [],
            tdata: {},
        }
    },
    mounted() {
        getAction('/wz/hosp/wzHospital/list', { pageNo: 1, pageSize: 999 }).then(res => {
            res.result.records.unshift({ id: '', name: '全部' })
            this.hospList = res.result.records;
        })
        getAction('/wz/statistics/findBasic', { dateType: this.date, hospId: this.orgId }).then(res => {
            this.tdata = res.result
        })
    },
    methods: {
        goBackToHome() {
            this.$router.push({ path: '/' });
        },
    }
}
</script>

<style lang="less" scoped>
.mainV {
    width: 100%;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.mainVt {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .mainVti {
        width: 450px;
        background-color: #077762;
        color: #fff;
        border-radius: 12px;
        box-shadow: 0 0 12px #00423688;
        height: 60px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;

        div {
            margin-right: 30px;
            font-size: 24px;
        }

        p {
            font-weight: bold;
        }
    }
}

.mainVc,
.mainVm,
.mainVe {
    width: 100%;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainVm {
    height: 40px;
    justify-content: center;

    .mainVmi {
        width: 450px;
        color: #fff;
        height: 36px;
        display: flex;
        font-size: 16px;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 12px #00423688;
        background: #077762;
        border-radius: 12px;

        &:first-of-type {
            margin-right: 30px;
        }
    }
}

p {
    margin: 0;
}
</style>